<template>
  <div class="flow" ref="flow">
    <portalTab
      :tabData="tabModelData"
      :tabValue="tabValueModelValue"
      :rightTools="false"
      @click="clickModelFun"
      :showToolBar="false"
    >
      <template :slot="tabValueModelValue">
        <listFilter
          @getList="getList"
          :fields="fields"
          v-if="cIsHaveModelValue"
          @rowClick="rowClickFun"
          :highSearchFile="highSearchFile"
        ></listFilter>
      </template>
    </portalTab>
  </div>
</template>

<script>
import portalTab from "@/components/portalTab";
import listFilter from "@/components/listFilter";
import { axiosGetH3WorkFlowList } from "@/api/home";
import { createParams } from "./utils";
export default {
  name: "flowBussiness",
  components: {
    portalTab,
    listFilter
  },
  computed: {
    cIsHaveModelValue () {
      let arr = this.tabModelData.map(v => v.name);
      return arr.includes(this.tabValueModelValue);
    }
  },
  data () {
    return {
      tabValueModelValue: "FlowToDoTable",
      tabModelData: [
        { id: 1, label: "流程待办", name: "FlowToDoTable" },
        { id: 2, label: "流程已办", name: "FlowDoneTable" },
        { id: 3, label: "知会待办", name: "notifyDone" },
        { id: 4, label: "知会已办", name: "notifyNotDone" }
      ],
      fields: [
        { prop: "instanceName", label: "审批事项", type: "el-input" },
        { prop: "workflowName", label: "流程名称", type: "el-input" },
        { prop: "workflowPackage", label: "流程类别", type: "el-input" },
        { prop: "activityName", label: "步骤名称" },
        { prop: "originator", label: "发起人" },
        { prop: "startTime", label: "接收时间" }
      ],
      highSearchFile: [
        { prop: "instanceName", label: "审批事项", type: "el-input" },
        { prop: "workflowName", label: "流程名称", type: "el-input" },
        { prop: "workflowPackage", label: "流程类别", type: "el-input" },
        { prop: "activityName", label: "步骤名称", type: "el-input" },
        { prop: "originator", label: "发起人", type: "el-input" },
        { prop: "startTime", label: "接收时间", type: "el-input" }
      ]
    };
  },
  methods: {
    clickModelFun (tabValue) {
      this.tabValueModelValue = tabValue;
    },
    getList (index, size, query, cb) {
      const params = createParams(this.tabValueModelValue);
      Object.assign(params, query);
      axiosGetH3WorkFlowList(params).then(res => {
        if (res.data.code === 0) {
          let map = {
            total: res.data.data.total || 0,
            list: res.data.data.records || []
          };
          cb(map);
        }
      });
    },
    rowClickFun ({row}) {
      console.log(row);
      window.open(row.workItemUrl);
    }
  }
};
</script>

<style lang="less" scoped>
.flow {
  height: 100%;
  /deep/ .el-tabs__content {
    height: calc(100% - 40px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
